<template>
  <div class="config-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统配置</span>
        </div>
      </template>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="Binance API Key">
          <el-form ref="apiKeyForm" :model="apiKeyConfig" label-width="120px">
            <el-form-item label="API Key" prop="apiKey" :rules="[{ required: true, message: '请输入API Key', trigger: 'blur' }]">
              <el-input v-model="apiKeyConfig.apiKey" placeholder="请输入API Key" :type="showApiKey ? 'text' : 'password'" />
            </el-form-item>
            <el-form-item label="Secret Key" prop="secretKey" :rules="[{ required: true, message: '请输入Secret Key', trigger: 'blur' }]">
              <el-input v-model="apiKeyConfig.secretKey" placeholder="请输入Secret Key" :type="showSecretKey ? 'text' : 'password'" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="showApiKey">显示API Key</el-checkbox>
              <el-checkbox v-model="showSecretKey">显示Secret Key</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveApiKey">保存API Key</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="系统参数">
          <el-form ref="systemParamsForm" :model="systemParams" label-width="120px">
            <el-form-item label="默认交易对" prop="defaultSymbol" :rules="[{ required: true, message: '请选择默认交易对', trigger: 'change' }]">
              <el-select v-model="systemParams.defaultSymbol" placeholder="请选择默认交易对">
                <el-option label="BTCUSDT" value="BTCUSDT" />
                <el-option label="ETHUSDT" value="ETHUSDT" />
                <el-option label="SOLUSDT" value="SOLUSDT" />
              </el-select>
            </el-form-item>
            <el-form-item label="默认回测周期(天)" prop="defaultBacktestDays" :rules="[{ required: true, message: '请输入默认回测周期', trigger: 'blur' }, { type: 'number', min: 1, max: 365, message: '回测周期必须在1-365天之间', trigger: 'blur' }]">
              <el-input v-model.number="systemParams.defaultBacktestDays" placeholder="请输入默认回测周期" />
            </el-form-item>
            <el-form-item label="数据刷新频率(秒)" prop="refreshInterval" :rules="[{ required: true, message: '请输入刷新频率', trigger: 'blur' }, { type: 'number', min: 1, max: 300, message: '刷新频率必须在1-300秒之间', trigger: 'blur' }]">
              <el-input v-model.number="systemParams.refreshInterval" placeholder="请输入刷新频率" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSystemParams">保存系统参数</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('0');
const showApiKey = ref(false);
const showSecretKey = ref(false);
const apiKeyForm = ref(null);
const systemParamsForm = ref(null);
const apiKeyConfig = reactive({
  apiKey: '',
  secretKey: ''
});
const systemParams = reactive({
  defaultSymbol: 'BTCUSDT',
  defaultBacktestDays: 30,
  refreshInterval: 5
});

onMounted(() => {
  // 模拟加载配置
  loadConfig();
});

function loadConfig() {
  // 模拟API请求
  setTimeout(() => {
    // 从环境变量加载API Key（实际项目中应该从后端获取）
    apiKeyConfig.apiKey = import.meta.env.VITE_API_KEY || '';
    apiKeyConfig.secretKey = import.meta.env.VITE_API_SECRET || '';

    // 模拟加载系统参数
    systemParams.defaultSymbol = 'BTCUSDT';
    systemParams.defaultBacktestDays = 30;
    systemParams.refreshInterval = 5;
  }, 500);
}

function saveApiKey() {
  apiKeyForm.value.validate((valid) => {
    if (valid) {
      // 模拟保存API Key
      setTimeout(() => {
        ElMessage({
          type: 'success',
          message: 'API Key保存成功'
        });
      }, 500);
    } else {
      return false;
    }
  });
}

function saveSystemParams() {
  systemParamsForm.value.validate((valid) => {
    if (valid) {
      // 模拟保存系统参数
      setTimeout(() => {
        ElMessage({
          type: 'success',
          message: '系统参数保存成功'
        });
      }, 500);
    } else {
      return false;
    }
  });
}
</script>

<style scoped>
.config-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>